'use strict';
import React, {Component} from 'react';
import {
    View,
    Image,
    Text,
    TouchableOpacity,
    StyleSheet,
} from 'react-native';
import {_renderAvatar} from '../Utils/ViewUtils';
import ImageViewer from '../Pages/ImageViewer';
import Global from '../Commom/GlobalConst';

const styles = StyleSheet.create({
    container: {
        borderColor: '#F2F3F5',
        borderBottomWidth: 1,
        paddingBottom: 10,
        backgroundColor: 'white',
    },
    rowContent: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 10,
        flexWrap: 'wrap',
        paddingRight: 20,
        paddingLeft: 20
    },
    imageBox: {
        marginTop: 7,
        width: (Global.Const.size.width - 70) / 4,
        height: (Global.Const.size.width - 70) / 4,
    }
});

/**
 * 评论Item
 */
export default class CommentItemView extends Component {

    goToImageViewer(images){
        this.props.navigator.push({
            name: 'ImageViewer',
            component: ImageViewer,
            passProps: {
                source: images,
            }
        })
    }

    render() {
        let {
            item,
            numberOfLines
        } = this.props;
        let images = item.images;
        return (
            <View style={styles.container}>
                {_renderAvatar(item)}
                <Text numberOfLines={numberOfLines} style={{paddingRight: 20, paddingLeft: 20,fontSize: 14,color: Global.FontColor.LightGrey,lineHeight: 25}}>{item.content}</Text>
                <View style={styles.rowContent}>
                    {
                        images ?
                            images.map((item, index)=> {
                                let marginRight = ((index + 1) % 4 === 0) ? 0 : 7;
                                if (index >= 8) {
                                    return;
                                }
                                return (
                                    <TouchableOpacity
                                        key={'img' + index}
                                        onPress={() => this.goToImageViewer(images)}
                                    >
                                        <Image style={[styles.imageBox, {marginRight}]}
                                               source={{uri:item}}
                                        />
                                    </TouchableOpacity>
                                )
                            }) : null
                    }
                </View>
            </View>
        )
    }

}